<template>
	<view class="person">
		<view class="item">
			<view class="set-item">
				<view class="set-item-label"><text>姓名</text></view>
				<view class="set-item-value">
					<text>{{ propsData.baseData.uname }}</text>
				</view>
			</view>
			<view class="set-item">
				<view class="set-item-label"><text>手机号</text></view>
				<view class="set-item-value">
					<text>{{ propsData.baseData.mobile }}</text>
				</view>
			</view>
			<view class="set-item">
				<view class="set-item-label"><text>身份证</text></view>
				<view class="set-item-value">
					<text>{{ propsData.baseData.Idcard }}</text>
				</view>
			</view>
		</view>
		<view class="item promise-page">
			<view class="set-item">
				<view class="set-item-label"><text>承诺书</text></view>
				<view class="set-item-value" @click="downloadFileClick">
					<icon class="iconfont icon">&#xe6ae;</icon>
					<text>下载承诺书模板</text>
				</view>
			</view>
			<view class="set-item set-item-page">
				<view class="page">
					<view class="page-img" @click="putFileClick">
						<view class="upload-tips" v-if="!personData.downFile">
							<icon class="iconfont icon">&#xe71e;</icon>
							<text>点击上传</text>
						</view>
						<image class="img" :src="personData.downFile" mode="aspectFill"></image>
					</view>
					<view class="tips">签订承诺书将享有优先展示权</view>
				</view>
				<view class="upload-tips">请先下载承诺书模板填写后，上传彩色扫描件；图片清晰，支持格 式：jpg、jpeg、png，大小不超过5MB</view>
			</view>
		</view>
	</view>

	<view class="next-ft"><button class="btn" @click="nextSteps">下一步</button></view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { uploadImg } from '@/subpages/common/api/upload.js';
import { showModal } from '@/common/hooks/useShow.js';
import { downloadFile } from '@/subpages/common/api/open.js';
import config from '@/uni.config.js';
const emits = defineEmits(['personMsgCallback']);
const propsData = defineProps({
	baseData: Object
});
const personData = reactive({
	downFile: ''
});

async function downloadFileClick() {
	const res = await downloadFile();
	uni.downloadFile({
		url: res.data.url,
		success: res => {
			if (res.statusCode === 200) {
				uni.openDocument({
					filePath: res.tempFilePath,
					showMenu: true,
					success: res2 => {
						showToast('下载成功');
					}
				});
			} else {
				showToast('下载失败');
			}
		},
		fail: res => {
			showToast('下载失败');
		}
	});
}
function putFileClick() {
	uni.chooseImage({
		count: 1,
		crop: {
			width: 600,
			height: 600
		},
		success(res) {
			const size = +res.tempFiles[0].size / 1024 / 1024;
			if (size > config.file.uploadSize) {
				showModal({
					content: `建议上传小于${config.file.uploadSize}M尺寸为100*100的图片`,
					showCancel: false
				});
			} else {
				let newData = [
					{
						type: 'head',
						fileUrl: res.tempFiles[0].path
					}
				];
				uploadImg(newData)
					.then(uploadRes => {
						personData.downFile = uploadRes[0].src;
					})
					.catch(error => {
						console.log(error, 'error');
					});
			}
		}
	});
}
function showToast(text) {
	uni.showToast({
		icon: 'none',
		title: text
	});
}
function nextSteps() {
	emits('personMsgCallback', { agreement: personData.downFile, stepIndex: 1 });
}
</script>
<style lang="scss">
@import '@/common/css/base.scss';
</style>
<style scoped lang="scss">
@import '@/subpages/common/css/set.scss';
.person {
	padding-bottom: 100rpx;
	.item {
		margin: 28rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;
		.set-item-value {
			font-size:28rpx;
			color: #666;
		}
	}
	.promise-page {
		margin-bottom: 200rpx;
		.icon {
			font-size: 38rpx;
			color: #666;
		}
		.set-item-page {
			display: block;
		}
		.page {
			display: flex;
			align-items: flex-start;
			.tips {
				margin-left: 24rpx;
				font-size: 24rpx;
				color: #e1835b;
			}
			.page-img {
				position: relative;
				width: 152rpx;
				height: 200rpx;
				border: 1px dashed #ececec;
				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
				.upload-tips {
					position: absolute;
					top: 12rpx;
					width: 100%;
					text-align: center;
					color: #ececec;
					font-size: 24rpx;
					.icon {
						display: block;
						color: #ececec;
						font-size: 24rpx;
					}
				}
			}
		}
		.upload-tips {
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #aaa;
		}
	}
}
</style>
